header {
    padding-top: 74px;
    padding-bottom: 128px;
}

.header-background {
    background-image: url("../img/header_image.jpg");
    background-size: cover;
    background-position: center;
    height: max-content;
}

.header-text { font-size: 48px; }



.heading-header { text-align: center; }

.heading {
    padding-top: 46px;
    padding-bottom: 46px;
    align-items: center;
    background-size: cover;
    height: max-content;
}

.heading-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.heading-grid-top, .heading-grid-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.heading-grid-top { padding-bottom: 56px; }
.heading-grid-bottom { padding-top: 56px; }
.heading-grid-item { text-align: center; }



main {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-image: url("../img/main_backgrounds/2.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.main-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-radius: 65px;
    border-top: solid darkcyan 3px;
    border-bottom: solid darkcyan 3px;
    border-left: solid darkcyan 2px;
    border-right: solid darkcyan 2px;
}

.main-grid-item {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
}

#arch-based-distros,
#debian-based-distros,
#independently-distros,
#maybe-interesting {
    padding-top: 56px;
}

.card { border: 0px; }
footer { background-image: url("../img/header_image.jpg"); }



@media (max-width: 1024px) {
    .header-text { font-size: 28px; }
    .main-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .heading {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .heading-grid-top { padding-bottom: 24px; }
    .heading-grid-bottom { padding-top: 24px; }

    .heading-grid-top, .heading-grid-bottom {
        display: flex;
        flex-direction: column;
    }

    .main-grid {
        display: flex;
        flex-direction: column;
    }
}
